<template>
	
	<view class="bg-white" @click.stop="openOrderDetail">
		<divider></divider>
		<!-- 头部 -->
		<view class="d-flex a-center p-2 border-bottom border-light-secondary">
			<text class="text-light-muted">{{item.createTime}}</text>
			<text class="main-text-color ml-auto font-md">{{item.status}}</text>
		</view>
		<!-- body -->
		<view class="px-2"
		v-for="(item2, index2) in item.order_items" :key="index2">
			<order-list-item :item="item2" :index="index" ></order-list-item>
		</view>
		<!-- 底部 -->
		<view class="d-flex a-center p-2">
			<text class="text-dark font-md ml-auto">共{{item.total_num}}件商品，合计¥{{item.total_price}}</text>
		</view>
		<view class="d-flex j-end a-center px-2">
			<view class="border border-secondary rounded py-1 px-2 text-secondary"
			style="border-width: 2upx;"
			hover-class="bg-light-secondary"
			@click.stop="openAfterSale">申请售后</view>
			<view class="ml-2 border border-secondary rounded py-1 px-2 text-secondary"
			style="border-width: 2upx;"
			hover-class="bg-light-secondary"
			@click.stop="openLogistics">查看物流</view>
			<view class="ml-2 border border-secondary rounded py-1 px-2 text-secondary"
			style="border-width: 2upx; "
			hover-class="bg-light-secondary">确认收货</view>
		</view>
	</view>
</template>

<script>
	import orderListItem from "@/components/order/order-list-item.vue"
	export default {
		props: {
			item: Object,
			index: Number
		},
		
		components: {
			orderListItem,
		},
		
		methods: {
			openOrderDetail() {
				uni.navigateTo({
					url: '../../pages/order-detail/order-detail'
				});
			},
			
			openLogistics() {
				uni.navigateTo({
					url: '/pages/logistics-detail/logistics-detail'
				});
			},
			
			openAfterSale() {
				uni.navigateTo({
					url: '/pages/after-sale/after-sale'
				});
			}
		}
	}
</script>

<style>
</style>
